window.onload=function(){

    let personalLeft=document.getElementsByClassName("personal_left")[0];
    let Li=personalLeft.getElementsByTagName("li");
    let active=document.getElementsByClassName("active")[0];
    for(let i=0;i<Li.length;i++){
        Li[i].onclick=function(){
            for(let i=0;i<Li.length;i++){
                Li[i].className=" ";
            }
            this.className="active";
        }
    }
    /*改变左侧·导航栏的位置*/
    document.addEventListener('scroll',function(){
        let topJuLi = document.documentElement.scrollTop;
        personalLeft.style.top = (topJuLi)+"px";
    },true);

    // //修改资料输入框
    var inputColor=document.getElementsByClassName("inputColor");
    for(let i=0;i<inputColor.length;i++){
        inputColor[i].onfocus=function(){
            inputColor[i].style.border="1px solid #89c3eb";
        }
        inputColor[i].onblur=function(){
            inputColor[i].style.border="1px solid rgba(0,0,0,0.1)";
        }
    }
    //选择性别
    // let sexBtn=document.getElementsByClassName("sexBtn");
    // sexBtn[0].onclick=function(){
    //     sexBtn[0].style.border="1px solid #38a1db";
    //     sexBtn[1].style.border="1px solid #e5e5e5";
    // }
    // sexBtn[1].onclick=function(){
    //     sexBtn[1].style.border="1px solid #38a1db";
    //     sexBtn[0].style.border="1px solid #e5e5e5";
    // }

    //调色板
    let body=document.body;
    let paletteColor=document.getElementsByClassName("paletteColor")[0];
    let inputArr=paletteColor.querySelectorAll("input");
    let spanArr=paletteColor.querySelectorAll("span");
    let obj={
        R:0,
        G:0,
        B:0,
        A:0.2
    };
    for (let i=0;i<inputArr.length;i++){
        inputArr[i].addEventListener("input",function(){
            console.log("事件触发");
            if(i==3){
                spanArr[i].innerHTML=(inputArr[i].value)/100;
            }else{
                spanArr[i].innerHTML=inputArr[i].value;

            }
            console.log(this);
            switch (this.name) {
                case "R":
                    obj.R=this.value;
                    break;
                case "B":
                    obj.B=this.value;
                    break;
                case "G":
                    obj.G=this.value;
                    break;
                case "A":
                    obj.A=(this.value)/100;
                    break;
            }
            console.log(obj);
            body.style.backgroundColor = `rgba(${obj.R},${obj.G},${obj.B},${obj.A})`
        })
    }
    /*基本信息*/
    let info_exit=document.getElementsByClassName("info-exit");
    info_exit[0].innerHTML=sessionStorage.getItem('nickname');
    info_exit[1].innerHTML=sessionStorage.getItem('id');
    info_exit[2].innerHTML=sessionStorage.getItem('email');
    info_exit[3].innerHTML=sessionStorage.getItem('realname');
    info_exit[4].innerHTML=sessionStorage.getItem('sex');
    info_exit[5].innerHTML=sessionStorage.getItem('birthday');
    // info_exit[6].innerHTML=sessionStorage.getItem('registTime');
}

//个人信息页面与编辑页面的调换
let exit=document.getElementsByClassName("exit")[0];
let changeInformation=document.getElementsByClassName("changeInformation")[0];
let headInfo=document.getElementsByClassName("head-info")[0];
let infoCancleBtn=document.getElementById("infoCancleBtn");
let infoPreserveBtn=document.getElementById("infoPreserveBtn");
function exitBtn(){
    headInfo.style.display="none";
    changeInformation.style.display="block";
}
exit.onclick=exitBtn;

function infoCancle(){
    headInfo.style.display="block";
    changeInformation.style.display="none";
}
infoCancleBtn.onclick=infoCancle;
function infoPreserve(){
    headInfo.style.display="block";
    changeInformation.style.display="none";
}
infoPreserveBtn.onclick=infoPreserve;

// let registerFindCodeInfoBox=document.getElementsByClassName("registerFindCodeInfoBox")[0];
// let allInput=registerFindCodeInfoBox.getElementsByTagName("input");
// for(let i=0;i<allInput.length;i++){
//     allInput[5].onclick=function(){
//         allInput[5].type='date';
//     }
//     allInput[5].onblur=function(){
//         allInput[5].type='text';
//     }
// }

//个人中心昵称
let userName=document.getElementById("user-name");
userName.innerHTML=sessionStorage.nickname;
if(sessionStorage.nickname==""){
    userName.innerHTML="飞翔的企鹅";
}

//防止个人信息出现null空指针对象;
let infoExit=document.getElementsByClassName("info-exit");
for(let i=0;i<infoExit.length;i++){
    if(infoExit[i].value==="null"){
        infoExit[i].value=" ";
    }
}
//js回显上传
var file=document.getElementById("file");
var head=document.getElementsByClassName("head")[0];
var image=head.getElementsByTagName("img")[0];

file.onchange=function(){
    var fileData=this.files[0];//获取到一个fileList对象的第一个文件；是要上传的文件
    // console.log(fileData)
    var pettern=/^image/;
    var size=fileData.size / 1024 / 1024;
    console.log(fileData.type);
    if(!pettern.test(fileData.type)){
        alert("图片格式不正确");
        return;
    }else if(size>1){
        alert("头像不能大于1M");
        return;
    }
    var formData=new FormData();//创建formData转换成data
    formData.append("upload" ,fileData);//加入文件对象
    // var Data=formData;
    //上传头像
    $.ajax({
        url:"http://localhost:8080/final_kele_war_exploded/file/upLoad",
        type: "post",
        cache:false,
        processData: false, //告诉jQuery不要去处理发送的数据
        contentType: false, //告诉jQuery不要去设置Content-Type请求头
        data: formData,
        success:function (data){
            var reader=new FileReader();
            reader.readAsDataURL(fileData);//将读取到的文件编码成Data URL
            //读取操作完成后调用
            reader.onload=function(e){
                console.log(e);
                console.log(this.result);
                image.setAttribute("src",this.result);
                this.result=sessionStorage.getItem("src");
            }
            // formData.append("image",value)
            if(data.msg=="上传成功"){
                alert("上传成功")
            }else{
                alert("上传失败")
            }
            // data.msg("上传成功")
        }
    })
}
var inputColor=document.getElementsByClassName("inputColor");
//修改资料输入框
for(let i=0;i<inputColor.length;i++){
    inputColor[i].onfocus=function(){
        inputColor[i].style.border="1px solid #89c3eb";
    }
    inputColor[i].onblur=function(){
        inputColor[i].style.border="1px solid rgba(0,0,0,0.1)";
    }
}
// 用户保存修改的个人信息
infoPreserveBtn.onclick=function(){
    $.ajax({
        url:"../user/updateAccount?id="+sessionStorage.getItem("id"),
        type:"post",
        data:{
            nickname:inputColor[0].value,
            account:inputColor[1].value,
            email:inputColor[2].value,
            realname:inputColor[3].value,
            sex:inputColor[4].value,
            birthday: inputColor[5].value
        },
        success:function(data){
            for(let i=0;i<infoExit.length;i++){
                infoExit[i].innerHTML=inputColor[i].value;
            }
            if(data.msg=="修改失败"){
                alert("修改失败")
                console.log(data)
            }else{
                console.log(data)
                alert("修改成功")
                sessionStorage.setItem("nickname",inputColor[0].value);
                sessionStorage.setItem("email",inputColor[2].value);
                sessionStorage.setItem("realname",inputColor[3].value);
                sessionStorage.setItem("sex",inputColor[4].value);
                sessionStorage.setItem("birthday",inputColor[5].value);
                infoPreserve();
                window.location.reload();
            }
        }
    })
}

